<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<base href="<%=basePath%>">

<html>
<head>
    <meta charset="utf-8">
    <title>
        阳光成单系统
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="System/css/x-admin.css" media="all">
    <link rel="stylesheet" href="System/lib/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" href="System/lib/bootstrap/js/bootstrap.min.js" media="all">
</head>
<body style="height:1150px;">
<div class="container-fluid ygyd-wrapper">
    <!--货位统计-->
    <div class="row">
        <div class="col-sm-6">
            <section class="panel" style="width:1200px; height:490px">
                <div class="panel-heading">货位统计</div>
                <div class="panel-body">
                    <div class="echarts" id="product" style="width:1120px; height:420px"></div>
                </div>
            </section>
        </div>
    </div>

</div>

<script src="System/lib/layui/layui.js" charset="utf-8"></script>
<script src="System/js/index.js"></script>
<script src="System/js/echarts.min.js"></script>
<script src="System/js/echart.js"></script>
<%--产品统计--%>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('product'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '车辆信息比例',
            subtext: '仅供参考',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [
                <c:forEach items="${localList}" var="l">
                '${l.goodstype.goodstypeType}',
                </c:forEach>]
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                /* { value: 1335, name: '车贷' },
                 { value: 310, name: '房贷' }*/
                <c:forEach items="${localList}" var="l">
                {
                    value: '${l.goodstype.goodstypeType.length()}',
                    name: '${l.goodstype.goodstypeType}'
                },
                </c:forEach>
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>
</html>